<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="/views/common/include/taglib.jsp"%>
	
	<script src="${ctx}/js/controllers/system/role/RoleTableController.js" type="text/javascript"></script>
	<script type="text/javascript">
		var ctx = '${ctx}';
		
		setCtx(ctx);
	</script>
	<style type="text/css">
		em{
		    border-right: 1px solid #565252;
		    margin-right: 3px;
		    margin-left:5px;
		}
	</style>
            <section>
              <div style="height:40px;line-height: 40px;">
                    <div class="forword_area"></div>
					<div class="location">当前位置：${sessionScope.currcent_position}</div>
              </div>
              <hr>
              <section>
                <!--begin 搜索栏 -->
                <input type="hidden" id="selectRm" value=""/>
                <input id="selectedCellId" type="hidden" value="">
                <div class="panel">
                  	<div class="btn-group">
                        <select id="type" class="dropdown-menu" onchange="roleList();">
                        	<c:forEach items="${permissions}" var="item">
                        		<option  value="${item.id}"  <c:if test="${type == item.id }">selected="selected"</c:if>>${item.name}</option>
                        	</c:forEach>
                        </select>
                    </div>
                    <div  style="float:left;height: 28px;">
                  	<input id="name" style="margin-left:8px;" type="text" maxlength="20" value="${(not empty name)? name : ''  }" class="input-sm" placeholder="角色名">
                  	</div>
		       		<div class="btn-group">
						<select class="dropdown-menu" id="pSize">
							<c:forEach items="${pageSizes }" var="item">
								<option value="${item.value }"
									<c:if test="${pSize == item.value }">selected</c:if>>&nbsp;&nbsp;&nbsp;${item.label }</option>
							</c:forEach>
						</select>
					</div>
		             <div class="form-control">
		               <div style="margin-bottom: 0px;">
		                 <div class="search" onclick="roleList();" ><img src="${ctx }/images/table/search_second.png"></div>
		                 <div class="search" onclick="saveOrUpdate();" ><img src="${ctx }/images/table/add_second.png"></div>
		               </div>
		             </div>
                </div><!--end 搜索栏 -->

                <!--begin table表格 -->
                <div>
                <table class="table">
                    <thead>
                      <tr>
                        <th width="5%">序号</th>
                        <th width="10%">角色名</th>
                        <th width="15%">描述</th>
                        <th width="35%">小区</th>
                        <th width="10%">操作</th>
                      </tr>
                    </thead>
                    <tbody id="tableTbody">
                      	<c:forEach items="${info.list }" var="item" varStatus="itemStatus">
	                      <tr onmouseover="mouseoverOne(this)" onmouseout="mouseoutOne(this)">
	                        <td>${itemStatus.index + 1 }</td>
	                        <td>${item.roleName}</td>
	                        <td>
	                        	<c:choose>
	                        		<c:when test="${item.descrip == null || item.descrip == ''}">
	                        			无
	                        		</c:when>
	                        		<c:otherwise>
	                        			${item.descrip}
	                        		</c:otherwise>
	                        	</c:choose>
	                        </td>
	                        <td>
	                        	<c:choose>
	                        		<c:when test="${item.roleType == 0}">
	                        			全平台
	                        		</c:when>
	                        		<c:otherwise>
	                        			<c:choose>
	                        				<c:when test="${fn:length(item.cells) == 0}">
	                        					无
	                        				</c:when>
	                        				<c:otherwise>
	                        					<c:forEach items="${item.cells}" var="cellItem" varStatus="cellStatus">
	                        						<c:if test="${cellStatus.index > 0}">,</c:if>${cellItem.cellName}
	                        					</c:forEach>
	                        				</c:otherwise>
	                        			</c:choose>
	                        		</c:otherwise>
	                        	</c:choose>
	                        </td>
	                        <td >
	                          <a class="fa fa-check " onclick="saveOrUpdate('${item.id }');" >编辑&nbsp;|</a>
	                          <a class="fa fa-check " onclick="deleteByIds('${item.id }');" >删除</a>
	                        </td>
	                      </tr>
                      	</c:forEach>
                    </tbody>               
                                      
                    <tfoot>
		            	<tr>
			               <td colspan="7">
			                  <div style="float:left;">
			                      <span class="total">合计 ${info.total} 条数据</span>               
			            	  </div>
			                  <div style="float:right;  margin-right: 10px;margin-top: 29px">   
			                      <div style="float:left;">             
				                      <ul class="footer_ul">
				                      	<c:if test="${info.hasPreviousPage }">
				                        <li onclick="gotoPage(${currentPage-1 });"><a style="color:#37CED4">&lt;&lt;</a></li>
				                      	</c:if>
				                        <c:if test="${info.firstPage > 1}">
				                        	<li onclick="gotoPage(1);" style="border: 1px solid #9A9A9A;">
				                             	<a>1</a>
				                        	</li>
				                        	<c:if test="${info.firstPage > 2}">
				                        		...
				                        	</c:if>
				                      	</c:if>
				                        <c:forEach items="${info.navigatepageNums }" var="page">
				                        <li onclick="gotoPage(${page });" class="<c:if test="${currentPage == page }">active</c:if>" style="border: 1px solid #9A9A9A;">
				                             <a>${page}</a>
				                        </li>
				                        </c:forEach>
				                        <c:if test="${info.lastPage < info.pages}">
				                        	<c:if test="${info.firstPage < info.pages - 1}">
				                        		...
				                        	</c:if>
				                        	<li onclick="gotoPage(${info.pages});" style="border: 1px solid #9A9A9A;">
				                             	<a>${info.pages}</a>
				                        	</li>
				                      	</c:if>
				                        <c:if test="${info.hasNextPage }">
				                        <li><a onclick="gotoPage(${currentPage+1});" style="color:#37CED4">&gt;&gt;</a></li>
				                      	</c:if>
				                      </ul>
			                     	</div>
	             					<div style="float:left;  height: 30px;">
										<span style="color: #9A9A9A;">跳转到</span> 
										<input class="inputclass" id="pageNo" onkeydown="if(event.keyCode==13){event.keyCode=0;return false;}" type="text" value="${currentPage }" style="width:26px;height:28px">
										<span style="color: #9A9A9A;">页</span> 
										<span class="buttonclass" id="J_JumpTo" onclick="gotoViewPage(null);"><a>GO</a></span>
									</div>
			                  </div>
							</td>
						</tr>
					</tfoot>
               	 </table>
               	 </div>
              	</section>
            </section>
<%@include file="/views/common/footer.jsp"%>
<script type="text/javascript">
//鼠标滑入滑出改变增删改图标
$("img[src*=view]").hover(function(){
	$(this).attr("src","${ctx}/images/tables/view_red.png");
	},function(){
		$(this).attr("src","${ctx}/images/tables/view_green.png");
	});
$("img[src*=edit]").hover(function(){
	$(this).attr("src","${ctx}/images/tables/edit_red.png");
	},function(){
		$(this).attr("src","${ctx}/images/tables/edit_green.png");
	});
$("img[src*=delete]").hover(function(){
	$(this).attr("src","${ctx}/images/tables/delete_red.png");
	},function(){
		$(this).attr("src","${ctx}/images/tables/delete_green.png");
	});
	
//实现选中取消切换图片
$("tbody td>img").toggle(function(){    
    $(this).attr("src","${ctx }/images/tables/honggou.png"); 
    //$(this).parents("tr").children().each(function(){
	    //$(this).css("background","#D3F0F1");
   //});    
},function(){    
    $(this).attr("src", "${ctx }/images/tables/wugou.png"); 
   // $(this).parents("tr").children().each(function(){
	   // $(this).css("background","");
  // });
    });
    
//实现全选切换所有选项图标
$("#all").toggle(function(){    
    $(this).attr("src","${ctx }/images/tables/honggou.png"); 
    $("tbody td>img").attr("src","${ctx }/images/tables/honggou.png");  
},function(){    
    $(this).attr("src", "${ctx }/images/tables/wugou.png"); 
    $("tbody td>img").attr("src","${ctx }/images/tables/wugou.png");  
    });
</script>
<!-- 解决ie 6 7 8 9不能显示placeholder的问题 -->
<script src="${ctx}/js/lib/jquery.JPlaceholder.js"></script>
